// import logo from './logo.svg';
import React, { createContext, useEffect, useState } from "react"
import Tool from '@/Tool/Tool';
import Main from '@/Main/Main';
import Operation from "@/Operation/Operation"
import Editor from "@/common/Editor"
import { loadRecord } from '@/init/initData';
import '@/index.css';
const EditorContext = createContext(null);
window.EditorContext = EditorContext
function App() {
  const editor = new Editor()
  const [state, setState] = useState({})
  useEffect(() => {
    setState(editor.state)
    loadRecord(editor)
    // setImgList(list);
    editor.taskLoadFrame(0, false);
  }, []);
  
  return (
    <div className="App">
      {/* <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header> */}
      <EditorContext.Provider value={editor}>
        <div className="pc-editor">
          <div className="pc-editor-layout">
            {/* <div className="business-container"><Header /></div> */}
            <div className="content-container-wrap">
              <div className="content-container">
                {/* <Tool /> */}
                <Main state={state} />
                {/* <Operation /> */}
                {/* <div class="operation-container">
                  <Operation />
                </div> */}
              </div>
            </div>
          </div>
        </div>
      </EditorContext.Provider>
    </div>
  );
}

export default App;
